<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body id="app">
    <!-- //获取使用直接值 -->

    <h2>{{hello}}</h2>

    <!-- 使用html语句.v-html -->
    <!-- <h3>{{message}}</h3>  -->
    <p v-html="message"></p>

    <!-- 原本属性获取vue的值,需要加一个: ,获取数据方式还是引号-->
    <a :href="url">baidu</a>

    <button >{{count}}</button> 
</body>

<script>

    // 
    // const vm = {
    //     data:function(){
    //         return{
    //             header:"123",
    //             count:ref(0)
    //         }
            
    //     }
    // }
    // const app = Vue.createApp(vm)
    // app.mount('h3')

    const vm = {
            data:function(){
                return{
                    hello:"hello world",
                    header:"45678",
                    count:1,
                    message:"<h1>hello vue,渲染html语句</h1>",
                    url:"http://www.baidu.com"
                }
            }
        }
    const {createApp} = Vue;
    createApp(vm).mount("#app")
</script>


<!-- <script>
   // 组合式 
//     const {createApp,ref} = Vue;

//     createApp({
//     setup() {
//       const message = ref('Hello vue!')
//       return {
//         message
//       }
//     }
//   }).mount("#app")
</script> -->
</html>